<template>
  <div id="registerContainer">
    <div class="register-title">
      <span class="title">注册</span>
    </div>
    <div class="register-box">
      <el-form :model="registerForm" status-icon :rules="registerRules" ref="registerForm" label-width="0px">
        <el-form-item prop="nickname">
          <el-input type="text" v-model="registerForm.nickname" autocomplete="off" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="registerForm.password" autocomplete="off" placeholder="密码 (6-16个字符组成，区分大小写)"></el-input>
        </el-form-item>
        <el-form-item prop="reppassword">
          <el-input type="password" v-model="registerForm.reppassword" autocomplete="on" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input type="text" v-model="registerForm.email" autocomplete="off" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-input type="text" v-model="registerForm.captcha" autocomplete="off" placeholder="验证码">
            <sendEmailCaptcha slot="append" :email="registerForm.email" reUtype="admin" @setCpatchaMD5="setMd5"></sendEmailCaptcha>
          </el-input>
        </el-form-item>
        <el-form-item prop="inviteCode">
          <el-input type="text" v-model="registerForm.inviteCode" autocomplete="off" placeholder="管理员邀请码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="autoWidthButton" @click="submitRegist" type="primary">注册</el-button>
        </el-form-item>
        <el-form-item>
          <el-link :underline="false" @click="toLogin" style="float:right">已有账号?去登录</el-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { adminRegist } from "@/api/admin/user"
import sendEmailCaptcha from "@/components/public/sendEmailCaptcha"
import { mapGetters, mapMutations } from 'vuex'
export default {
  data() {
    return {
      registerForm: {//注册表单
        nickname: '',
        password: '',
        reppassword: '',
        email: '',
        captcha: '',
        captchaMD5: '',
        inviteCode: ''
      },
      registerRules: {//表单验证规则
        nickname: [{ required: true, message: '请输入昵称', blur: 'change' }, { min: 2, max: 16, message: '最小2个字符，最长16个字符', trigger: 'change' }],
        password: [{ required: true, message: '请输入密码', blur: 'change' }, { min: 6, max: 16, message: '最小6个字符，最长16个字符', trigger: 'change' }],
        reppassword: [{ required: true, message: '请输入确认密码', blur: 'change' }, { min: 6, max: 16, message: '最6个字符，最长16个字符', trigger: 'change' }],
        email: [{ required: true, message: '请输入邮箱', blur: 'change' }, { min: 6, max: 40, message: '最小6个字符，最长40个字符', trigger: 'change' }],
        captcha: [{ required: true, message: '请输入验证码', blur: 'change' }, { min: 6, max: 6, message: '验证码长度为6个字符', trigger: 'change' }],
        inviteCode: [{ required: true, message: '请输入邀请码', blur: 'change' }]
      }
    }
  },
  components: {
    sendEmailCaptcha
  },
  computed: {
    ...mapGetters({
      userMsg: 'user/getUserMsg',
      userType: 'user/getUserType'
    })
  },
  methods: {
    ...mapMutations({
      setUserMsg: 'user/setUserMsg',
      setUserType: 'user/setUserType'
    }),
    //去登陆
    toLogin() {
      this.$router.push({
        path: '/admin/login'
      })
    },
    setMd5(md5) {
      this.registerForm.captchaMD5 = md5
    },
    //注册
    submitRegist() {
      this.$refs['registerForm'].validate((valid) => {
        if (valid) {
          adminRegist(this.registerForm, (res) => {
            if (res.code == 200) {
              this.setUserMsg(res.data)
              this.$router.push({
                path: '/admPage/index'
              })
            }
          }, true)
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>